<template>
	<view>
		<!-- #ifdef H5 -->
		<fui-sticky>
			<fui-nav-bar title="文章详情" @leftClick="leftClick">
				<fui-icon name="arrowleft"></fui-icon>
			</fui-nav-bar>
		</fui-sticky>
		<!-- #endif -->
		<fui-loading :isFixed="true" :isMask="true" v-if="loadingShow"></fui-loading>
		<view class="box" v-if="isShow&&!loadingShow">
			<view class="title">
				{{detailData?.title}}
			</view>

			<view class="userInfo">
				<view class="avatar">
					<view class="">
						<fui-avatar :src="detailData?.user_avatar"></fui-avatar>
					</view>

					<view class="user_text">
						<view class="user_name">
							<view>{{detailData?.user_nickname}}</view>
							<!-- <view class="level">
								<view style="display: flex;align-items: center;">
									<image style="width: 50rpx;height: 50rpx;" :src="userInfo?.vipPower?.vip_img||'../../../static/images/member/icon_vip_3x.png'" mode=""></image>
								</view>
								<view style="font-size: 24rpx;">
									{{userInfo?.vipPower?.vip_name}}
								</view>
							</view> -->
						</view>
						<view class="user_value">
							<text>{{getDateDiff(detailData?.publish_date)}}</text>
							<text style="margin-left: 30rpx;">已有{{detailData?.view_count}}人阅读</text>
						</view>
					</view>
				</view>
			</view>


			<fui-notice-bar style="padding: 32rpx;z-index: 999;" :content="content" :speed="80" scrollable>
				<view class="fui-icon__box">
					<fui-icon name="notice" :size="36" color="#FF2B2B"></fui-icon>
				</view>
			</fui-notice-bar>
			<view>
				<!-- #ifdef H5 -->
				<view class="text">
					<text v-html="getHref(detailData?.content)"></text>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="text">
					<text selectable="true">{{detailData?.content}}</text>
				</view>
				<!-- #endif -->
				<view class="images" v-for="(item,index) in detailData?.articles_img" :key="index">
					<image mode="widthFix" class="imagesOne" @click="previewImage(index)" :src="item"></image>
				</view>
			</view>
		</view>
		<view style="display: flex;justify-content: center;align-items: center;height: 80vh;" v-if="!isShow">
				<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂无文章"></fui-empty>
		</view>
	</view>
</template>

<script setup>
	import { getHref,parseCode,getDateDiff } from "@/utils/index.js"
	import { LoginStore } from "@/store/modules/login.js";
	const api = uniCloud.importObject('qc-article', {
		customUI: true // 取消自动展示的交互提示界面
	})
	import { ref, reactive, computed } from 'vue'
	const hasLogin = computed(() => (LoginStore().hasLogin))
	const userInfo = computed(() => (LoginStore().userInfo))
	import { onLoad } from "@dcloudio/uni-app";
	const detailData = ref(null)
	//遮罩loading
	const loadingShow = ref(true)
	const isShow = ref(true)
	onLoad(async (e) => {
		let item = JSON.parse(e.item)
		//前端领取红包
		if(!loadingShow.value){
			if(item.hongbao){
				setTimeout(()=>{
					uni.fui.toast('红包领取成功')
				},3000)
			}
		}
		
		delete item.hongbao
		const { data } = await api.getAdDetails(item)
		if(JSON.stringify(data) !== "{}"){
			isShow.value = true
			detailData.value = data
			detailData.value.view_count++
		}else{
			isShow.value = false
		}
		
		
		let params = {}
		if (hasLogin.value) {
			params = { user_id: userInfo?.value?._id }
		}
		await api.setViewCount({ _id: item._id, publish_type: item.publish_type, ...params })
		loadingShow.value = false
	})

	let content = '所有文章由用户发布，请用户自行辨别，谨防色情、赌博、诈骗'
	//图片预览
	const previewImage = (index) => {
		uni.previewImage({
			current: index, // 当前显示图片的索引值
			urls: detailData.value.articles_img, // 需要预览的图片列表，photoList要求必须是数组
			longPressActions: {
				itemList: ['保存图片', '识别二维码'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if (data.tapIndex == 0) {
						plus.nativeUI.closePreviewImage();
						//保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: detailData.value.articles_img[index],
							success: function() {
								uni.showToast({
									title: '成功保存到系统相册中',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						parseCode(detailData.value.articles_img[index])
					}
				},
				fail: function(err) {

				}
			}
		})
	}
	// #ifdef H5
	function leftClick() {
		uni.navigateBack()
	}
	// #endif
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		padding-bottom: 50rpx;
		background-color: #fff;
	}

	.images {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 60rpx;
	}

	.imagesOne {
		margin-top: 20rpx;
		width: 92vw;
	}

	.imageitem {
		width: 32%;
	}

	.text {
		color: var(--fui-color-subtitle);
		padding: 32rpx;
		background-color: #fff;
	}

	.bottom {
		z-index: 999;
		font-size: 24rpx;
		width: 100%;
		height: 100rpx;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-around;
		bottom: 0;
		background-color: var(--fui-bg-color);
	}

	.avatar {
		display: flex;
	}


	.button {
		padding: 10rpx 30rpx;
		color: #fff;
		border-radius: 40rpx;
		background-color: var(--fui-color-primary);
	}

	.user_text {
		width: 50vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 20rpx;
	}

	.user_value {
		color: var(--fui-color-subtitle);
		font-size: 20rpx;
	}

	.user_name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		vertical-align: middle;
	}

	.level {
		display: flex;
		padding: 2rpx 20rpx 2rpx 0;
		border-radius: 10rpx;
		justify-content: space-between;
		align-items: center;
		vertical-align: middle;
		font-size: 22rpx;
		background-color: #000;
		color: #febf40;

		image {
			margin-top: 5rpx;
		}
	}

	.title {
		background-color: var(--fui-bg-color);
		font-size: 36rpx;
		font-weight: bold;
		word-break: break-all;
		padding: 32rpx 32rpx 10rpx 32rpx;
	}

	.userInfo {
		background-color: var(--fui-bg-color);
		display: flex;
		align-items: center;
		padding: 32rpx;
		justify-content: space-between;
	}

	.bottom_icon {
		height: 100%;
		width: 20%;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon_1 {
		color: var(--fui-color-danger);
	}

	.icon_2 {
		color: var(--fui-color-primary);
	}
</style>